<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="ZhangPing">





<title>React Native--AppRegistry理解 | ZhangPing&#39;s Blog</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.0"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">ZhangPing&#39;s Blog</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">ZhangPing&#39;s Blog</a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; Menu</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">React Native--AppRegistry理解</h1>
            
                <div class="post-meta">
                    
                        Author: <a itemprop="author" rel="author" href="/">ZhangPing</a>
                    

                    
                        <span class="post-time">
                        Date: <a href="#">October 22, 2017&nbsp;&nbsp;21:00:00</a>
                        </span>
                    
                    
                        <span class="post-category">
                    Category:
                            
                                <a href="/categories/React-Native/">React Native</a>
                            
                        </span>
                    
                </div>
            
        </header>

        <div class="post-content">
            <p>在入门学习写react native的js的时候，发现在最后总会加上一段代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">AppRegistry.registerComponent(&#39;RNDemo&#39;, () &#x3D;&gt; RNDemo);</span><br></pre></td></tr></table></figure>

<p>不是很理解其作用是什么，经过查阅资料后理解为：</p>
<p>定义了一个名为 RNDemo 的新的组件（Component），并且使用了名为AppRegistry的内置模块进行了“注册”操作。在编写React Native应用时，肯定会写出很多新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合。这和android和ios的思路不谋而合，其实React Native的 组件也很丰富。官方提供的常用组件：</p>
<ul>
<li>ActivityIndicator</li>
<li>Button</li>
<li>DatePickerIOS</li>
<li>DrawerLayoutAndroid</li>
<li>FlatList</li>
<li>Image</li>
<li>KeyboardAvoidingView</li>
<li>ListView</li>
<li>MaskedViewIOS</li>
<li>Modal</li>
<li>NavigatorIOS</li>
<li>Picker</li>
<li>PickerIOS</li>
<li>ProgressBarAndroid</li>
<li>ProgressViewIOS</li>
<li>RefreshControl</li>
<li>ScrollView</li>
<li>SectionList</li>
<li>SegmentedControlIOS</li>
<li>Slider</li>
<li>SnapshotViewIOS</li>
<li>StatusBar</li>
<li>Switch</li>
<li>TabBarIOS</li>
<li>TabBarIOS.Item</li>
<li>Text</li>
<li>TextInput</li>
<li>ToolbarAndroid</li>
<li>TouchableHighlight</li>
<li>TouchableNativeFeedback</li>
<li>TouchableOpacity</li>
<li>TouchableWithoutFeedback</li>
<li>View</li>
<li>ViewPagerAndroid</li>
<li>VirtualizedList</li>
<li>WebView</li>
</ul>
<p>AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。</p>
<p>使用AppRegistry.registerComponent进行注册自己，然后原生系统就可以进行加载运行bundle文件包，最后就会可以调用AppRegistry.runApplication进行运行起来应用。当一个视图被摧毁的时候，为了结束应用需要调用AppRegistry.unmountApplictionComponentAtRootTag方法。</p>
<p><strong>AppRegistry常用方法</strong></p>
<p>.registerConfig(config:Array<AppConfig>)  static 静态方法, 进行注册配置信息</p>
<p>.registerComponent(appKey:string,getComponentFunc:ComponentProvider)  static静态方法，进行注册组件</p>
<p>.registerRunnable(appKey:string,func:Function)  static静态方法 ，进行注册线程</p>
<p>.registerAppKeys()  static静态方法，进行获取所有组件的keys值</p>
<p>.runApplication(appKey:string,appParameters:any)  static静态方法, 进行运行应用</p>
<p>.unmountApplicationComponentAtRootTag()  static静态方法，结束应用</p>
<p>AppRegistry是React中最基本的模块。</p>

        </div>

        
            <section class="post-copyright">
                
                    <p class="copyright-item">
                        <span>Author:</span>
                        <span>ZhangPing</span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>Permalink:</span>
                        <span><a href="https://zhangpingv5.gitee.io/2017/10/22/React%20Native--AppRegistry%E7%90%86%E8%A7%A3/">https://zhangpingv5.gitee.io/2017/10/22/React%20Native--AppRegistry%E7%90%86%E8%A7%A3/</a></span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>License:</span>
                        <span>转载请注明出处</span>
                    </p>
                
                
                     <p class="copyright-item">
                         <span>Slogan:</span>
                         <span>Self-descipline grants me freedom.</span>
                     </p>
                

            </section>
        
        <section class="post-tags">
            <div>
                <span>Tag(s):</span>
                <span class="tag">
                    
                    
                        <a href="/tags/RN/"># RN</a>
                    
                        
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">back</a>
                <span>· </span>
                <a href="/">home</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/2017/10/25/%E6%B8%85%E7%A9%BAActivity%20Task%E6%A0%88/">清空Activity Task栈</a>
            
            
            <a class="next" rel="next" href="/2017/09/20/ARouter%E8%B7%AF%E7%94%B1%E6%A1%86%E6%9E%B6%E4%BB%8B%E7%BB%8D/">ARouter路由框架介绍</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© ZhangPing | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>

    </div>
</body>
</html>
